/*
    1、查看滚动条的距离                         getScrollOffset() 
    2、可视尺寸                                getViewportSize()
    3、HTML页面尺寸-指整个文档的高度和宽度       getScrollSize()
    4、查看CSS属性的方法                       getStyles(elem, prop)
    5、封装绑定事件处理函数                   addEvent(el, type, fn)
    6、取消冒泡                                cancelBuble(e)
    7、获取事件源在当前文档的坐标               pagePos(e)
    8、拖拽函数的封装                           elemDrag(elem)
    9、阻止事件的默认行为                      preventDefaultEvent(event)
    10、解除事件处理函数                        removeEvent(elem, type, fn)
*/


// 1、查看滚动条的距离
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    } else {
        return {
            left: document.body.scrollLeft + document.documentElement.scrollLeft,
            top: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}



// 2、可视尺寸
function getViewportSize() {
    if (window.innerWidth) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else if (document.compatMode === 'backCompat') {
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}


// 3、HTML页面尺寸-指整个文档的高度和宽度
function getScrollSize() {
    if (document.body.scrollWidth) {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    } else {
        return {
            width: document.documentElement.scrollWidth,
            height: document.documentElement.scrollHeight
        }
    }
}


// 4、查看CSS属性的方法
function getStyles(elem, prop) {
    if (window.getComputedStyle) {
        if (prop) {
            return window.getComputedStyle(elem, null)[prop];
        } else {
            return window.getComputedStyle(elem, null);
        }
    } else {
        if (prop) {
            return elem.currentStyle[prop];
        } else {
            return elem.currentStyle;
        }
    }
}


// 5、封装绑定事件处理函数
function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, function () {
            fn.call(el);
        })
    } else {
        el['on' + type] = fn;
    }
}

// 6、取消冒泡
function cancelBuble(e) {
    var e = e || window.event;

    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancalBubble = true;
    }
}

// 7、获取事件源在当前文档的坐标  pagePos(e)
function pagePos(e) {
    var sLeft = getScrollOffset().left, // 获取滚动距离
        sTop = getScrollOffset().top,
        cLeft = document.documentElement.clientLeft || 0, // 获取文档偏移，IE8及一下不支持
        cTop = document.documentElement.clientTop || 0;
    console.log();
    return {
        X: e.clientX + sLeft - cLeft,
        Y: e.clientY + sTop - cTop
    }
}


// 8、拖拽函数的封装  elemDrag(elem)
function elemDrag(elem) {
    var x, y;

    addEvent(elem, 'mousedown', function (e) {
        var e = e || window.event;
        x = pagePos(e).X - parseInt(getStyles(elem, 'left'));
        y = pagePos(e).Y - parseInt(getStyles(elem, 'top'));

        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
        cancelBuble(e);   //取消冒泡行为
        preventDefaultEvent(e);  //阻止默认行为
    });

    function mouseMove(e) {
        var e = e || window.event;

        elem.style.top = pagePos(e).Y - y + 'px';
        elem.style.left = pagePos(e).X - x + 'px';

    }

    function mouseUp(e) {
        var e = e || window.event;

        removeEvent(document, 'mousemove', mouseMove);  //解除事件绑定函数
        removeEvent(document, 'mouseup', mouseUp);
    }

}


//9、阻止事件的默认行为
function preventDefaultEvent(e) {
    var e = e || window.event;
    if (typeof e.preventDefault != 'undefined') {//w3c
        e.preventDefault();
    } else {
        e.returnValue = false;//ie
    }
}

// 10、解除事件处理函数  
function removeEvent(elem, type, fn) {
    if (elem.addEventListener) {
        elem.removeEventListener(type, fn, false);
    } else if (elem.attachEvent) {
        elem.detachEvent('on' + type, fn);
    } else {
        elem['on' + 'type'] = null;
    }
}


// ========================================
// 替换json对象的值-还不是很明白原理
// 参数 tpl-模板, regExp-正则, opt-替换的对象
function setTplToHTML(tpl, regExp, opt) {
    return tpl.replace(regExp(), function (node, key) {
        console.log(node, key);
        return opt[key];
    });
}

function regTpl() {
    return new RegExp(/{{(.*?)}}/, 'gim');
}

// ========================================